<template>
	<view class="content_nine">
		<view class="content_nine_title">{{$t('合作评价')}}</view>
		<!-- <view>{{JSON.stringify(message)}}</view> -->
		<view class="content_nine_block" v-if="message.length>0">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view   @click="handeleChange(item)" class="scroll-view-item_H" v-for="(item,index) in message" :key="index">
					<view class="itemView">
						<view class="itemView_top">
							<image style="width: 46rpx;height: 46rpx;border-radius: 23rpx;" :src="IMAGE_URL+item.from_avatar" />
							<view class="itemView_top_name">{{lang=='zh'?item.from_username?item.from_username:'--':item.from_username_ru?item.from_username_ru:'--'}}</view>
						</view>
						<view class="itemView_centers">
							{{lang=='zh'?item.content?item.content:'--':item.content_ru?item.content_ru:'--'}}
						</view>
						<view class="itemView_bottom">
							<view style="margin-left: 40rpx;margin-right: 20rpx;margin-bottom: 5rpx;">{{$t('评论')}} :</view>
							<image style="width: 22rpx;height: 22rpx;margin-right: 6rpx;margin-bottom: 5rpx;" src="@/static/homePage/xxx.png" mode="" v-for="(item,index) in 5" :key="index"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="message.length == 0" class="off_pl">{{$t('暂无评论')}}</view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		props: ['message','lang'],
		data() {
			return {
				IMAGE_URL,
				HTTP_IMG_UTL
			}
		},
		methods: {
			handeleChange(item) {
				console.log('item:', item)
			}
		},
		mounted() {
			console.log(this.message)
		}
	}
</script>

<style scoped>
	.off_pl{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999999;
	}
	.itemView_bottom {
		width: 100%;
		height: 38rpx;
		background: linear-gradient(135deg, #D0FFEA 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		font-weight: 500;
		font-size: 18rpx;
		color: #3D3D3D;
		display: flex;
		align-items: center;
	}

	.itemView_centers {
		    width: 270rpx; /* 确保这个值是合适的 */
		    font-weight: 400;
		    font-size: 18rpx;
		    color: #3D3D3D;
		    height: 50rpx;
		    word-break: break-all; /* 允许断行 */
		    overflow: hidden; /* 超出隐藏 */
		    display: -webkit-box; /* 设置为盒子模型 */
		    -webkit-box-orient: vertical; /* 纵向布局 */
		    -webkit-line-clamp: 2; /* 限制行数为2 */
		    white-space: normal; /* 确保正常换行 */
	}

	.itemView_top_name {
		width: 200rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #3D3D3D;
		margin-left: 8rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.itemView_top {
		width: 90%;
		height: 46rpx;
		margin-top: 18rpx;
		display: flex;
		align-items: center;
	}

	.itemView {
		width: 307rpx;
		height: 171rpx;
		display: flex;
		background: #F7F8FB;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 307rpx;
		height: 171rpx;
		font-size: 36rpx;
		margin-right: 12rpx;
		border-radius: 16rpx;
		/* border: 2rpx solid #F0F0F0; */
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 171rpx;
		margin-top: 24rpx;
	}

	.content_nine_block {
		width: 100%;
		height: 171rpx;
	}

	.content_nine_title {
		font-weight: 500;
		font-size: 30rpx;
		color: #3D3D3D;
	}

	.content_nine {
		width: 750rpx;
		height: 281rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 34rpx 60rpx 24rpx 60rpx;
		margin-top: 12rpx;
	}
</style>